<template>
	<div class="special-zero" id="special-zero">
		<div class="subsidy-top"></div>
		<div class="subsidy">
			<div class="price">
				¥<span>{{ subsidy }}</span> 可用
			</div>
			<div class="time-boxs text">
				<div class="time">
					<span
						class="time-span"
						:class="[Number(i) || Number(i) === 0 ? 'time-bg' : 'division']"
						v-for="(i, index) in countDown(endTime).substr(0, 11)"
						:key="index"
						>{{ i }}</span
					>
				</div>
				<span> 有效</span>
			</div>
			<div class="use" @click="tabChange">
				立即使用
			</div>
		</div>
		<div class="subsidy-slide-box" :style="{ opacity: subsidySlideShow ? 1 : 0 }">
			<div class="subsidy-slide">
				<div class="price">
					¥<span>{{ subsidy }}</span> 可用
				</div>
			</div>
		</div>
		<div class="one-change" v-if="newGoodsList.length > 0" :class="[{ used: userInfo.newPerson === 0 }]">
			<div class="left">
				<i class="iconfont icon-webicon209"></i>
				<!-- <p v-if="userInfo.newPerson === 1">您还有1次新人免单机会</p> -->
				<p>{{ userInfo.newPerson === 1 ? '您还有1次新人免单机会' : '新人免单，确认收货后返现' }}</p>
			</div>
			<p class="p" @click="showTowrule(2)">新人免单规则</p>
		</div>
		<p class="rules" @click="showTowrule(1)">规则</p>
		<div class="goods-content">
			<!-- 新人列表 -->
			<div class="title-line" v-if="newGoodsList.length > 0"></div>
			<div class="goods-list" v-if="newGoodsList.length > 0">
				<div class="goods-wrap" v-for="(item, index) in newGoodsList" :key="index">
					<zero-item ref="zeroItem" :item="item" @refresh="refresh" :newPerson="userInfo.newPerson"></zero-item>
				</div>
			</div>
			<div class="title-line-t" v-if="newGoodsList.length > 0"></div>
			<!-- 下拉分类列表 -->
			<div class="goods-tabs">
				<van-tabs
					v-model="active"
					:background="tabBgColor"
					title-active-color="#FFFFFF"
					title-inactive-color="#FFFFFF"
					color="#FFF"
					sticky
					animated
					swipeable
					:border="false"
					@click="tabChange"
					@change="tabChange"
				>
					<van-tab v-for="(item, index) in list" :title="item.title" :key="index">
						<van-pull-refresh v-model="isRefresh" @refresh="onRefresh(item)">
							<van-list
								v-model="item.loading"
								:finished="item.finished"
								:error.sync="item.error"
								@load="loadMore(item, '', index)"
								finished-text="没有更多了"
								loading-text="拼命加载中"
							>
								<!--渲染商品列表-->
								<div class="goods-list" v-if="item.goodsList.length > 0">
									<div class="goods-wrap" v-for="(items, index) in item.goodsList" :key="index">
										<zero-item
											ref="zeroItem"
											:item="items"
											@refresh="onRefresh(item)"
											:newPerson="userInfo.newPerson"
										></zero-item>
									</div>
								</div>
								<van-skeleton
									v-for="i in 3"
									:key="'i' + i"
									:row-width="['100%', '60%', '30%', '100%']"
									avatar
									avatar-size="120px"
									avatar-shape="square"
									:row="4"
									:loading="item.loading"
								></van-skeleton>

								<div slot="error">
									<empty emptyText="暂无商品" offsetTop="150"></empty>
								</div>
							</van-list>
						</van-pull-refresh>
					</van-tab>
				</van-tabs>
			</div>
		</div>

		<!--回到首页-->
		<div class="backHome" @click="$router.push('/index')">
			<svg-icon class="icon" iconName="shouye"></svg-icon>
			<div class="text">
				<div>返回</div>
				<div>首页</div>
			</div>
		</div>
		<!-- 免单规则 -->
		<van-popup class="rule-popup" v-model="ruleVisible" closeable>
			<div class="main" v-html="ruleTemplate"></div>
		</van-popup>

		<van-popup class="copy-popups" get-container="body" v-model="visible">
			<div class="main">
				<div class="main-subsidy">
					<div class="price">
						¥<span>{{ dayAllowanceInfo.todayAllowanceMoney }}</span>
					</div>
					<div class="text">下单立减</div>
				</div>
				<div class="main-title">
					获得<span>{{ dayAllowanceInfo.todayAllowanceMoney }}元</span>现金补贴
				</div>
				<div class="time-box">
					<div class="time">
						<span
							class="time-span"
							:class="[Number(i) || Number(i) === 0 ? 'time-bg' : 'division']"
							v-for="(i, index) in countDown(endTime)"
							:key="index"
							>{{ i }}</span
						>
					</div>
					<span>后失效</span>
				</div>
				<div class="pay-btn" @click="visible = false">
					立即使用
				</div>
			</div>
		</van-popup>
		<!--领取补贴金-->
		<van-popup class="copy-popupss" get-container="body" v-model="visiblesubsidy">
			<div class="main">
				<div class="main-msg">
					可用补贴金不足
				</div>
				<div class="main-msg-tow">
					仍去购买商品吗？
				</div>
				<div class="btn-box">
					<div class="pay-btn-no" @click="visiblesubsidy = false">
						不了
					</div>
					<div class="pay-btn" @click="subsidyResolve">
						再逛逛
					</div>
				</div>
			</div>
		</van-popup>
		<!--领取补贴金-->
		<van-popup class="package-popups" :close-on-click-overlay="false" get-container="body" v-model="packageVisible">
			<div class="main">
				<div class="main-t  " :class="[packageVisibleClass ? 'main-t-a' : '']">
					<div class="text">
						<p>您有一份翼支付专享红包</p>
						<h2>最高得188元</h2>
						<p class="desc">- 赶快领取吧 -</p>
					</div>
				</div>
				<div class="main-b " :class="[packageVisibleClass ? 'main-b-a' : '']"></div>
				<div class="main-c main-c-a " :class="[packageVisibleClasst ? 'main-c-a-t' : '']" @click="Receive"></div>

				<!-- <img src="@/assets/images/index/special/lin.png" @click="Receive" alt /> -->
			</div>
		</van-popup>
	</div>
</template>

<script>
import moment from 'moment';
import { PullRefresh, Tab, Tabs, List, Skeleton, Popup } from 'vant';
import { ZeroItemTow } from './components';
import { Empty } from '@/components';
import { mapGetters } from 'vuex';
export default {
	name: 'special-zero2.0',
	components: {
		'van-tab': Tab,
		'van-tabs': Tabs,
		'zero-item': ZeroItemTow,
		Empty,
		'van-pull-refresh': PullRefresh,
		'van-list': List,
		'van-skeleton': Skeleton,
		'van-popup': Popup
	},
	data() {
		return {
			isRefresh: false, // 控制是否刷新
			newGoodsList: [], // 新人列表数据
			params: {
				page: 1,
				size: 20,
				freeStatus: 0,
				type: 3
			},
			ruleVisible: false,
			ruleTemplate: '',
			ruleTemplateOne: '',
			ruleTemplateTow: '',
			packageVisible: false, // 红包弹窗
			packageVisibleClass: false,
			packageVisibleClasst: false,
			visible: false, // 领取补贴金弹窗
			visiblesubsidy: false, //是否普通购买弹窗
			endTime: moment(moment().format('YYYY-MM-DD 23:59:59')),
			now: moment(),
			subsidy: 0,
			subsidySlideShow: false,
			dayAllowanceInfo: {
				todayAllowanceMoney: 0,
				todayAllowanceSurplus: 0
			},
			active: 0,
			list: [
				// {
				// 	id: '',
				// 	title: '全部',
				// 	loading: false,
				// 	finished: false,
				// 	error: false,
				// 	goodsList: [],
				// 	page: 1
				// }
			],
			tabBgColor: 'rgba(255,255,255,0)'
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		//计算属性，返回剩余时间
		countDown() {
			let self = this;
			return function(end) {
				let m1 = this.now;
				let m2 = end;
				var du = moment.duration(m2.diff(m1), 'ms'),
					hours = du.get('hours'),
					mins = du.get('minutes'),
					ss = du.get('seconds'),
					ms = du.get('millisecond');
				if (hours <= 0 && mins <= 0 && ss <= 0) {
					self.endTime = moment(new Date().getTime() + 15000);
					setTimeout(() => {
						this.getClassifyList();
					}, 14000);
					return '00:00:00:0000';
				} else {
					return (
						self.PrefixInteger(hours, 2) +
						':' +
						self.PrefixInteger(mins, 2) +
						':' +
						self.PrefixInteger(ss, 2) +
						':' +
						self.PrefixInteger(ms, 3)
					);
				}
			};
		}
	},
	created() {
		this.getSubsidy();
	},
	mounted() {
		// 设置参数已保证用户返回时不会重复刷新
		this.$store.commit('SET_INDEX_REFRESH', false);
		this.$store.dispatch('GET_USERINFO');
		document.getElementById('special-zero').style.minHeight = document.documentElement.clientHeight + 'px';
		// 百万补贴规则
		this.$service.shopping.shareTemplate
			.template({
				type: 13,
				playform: 'yzf'
			})
			.then(res => {
				this.ruleTemplateOne = res;
				this.ruleTemplate = res;
			});
		// 新人专享规则
		this.$service.shopping.shareTemplate
			.template({
				type: 11,
				playform: 'yzf'
			})
			.then(res => {
				this.ruleTemplateTow = res;
			});
		// 获取新人免单列表
		this.$service.shopping.goods
			.dayAllowanceGoodsList({
				...this.params,
				type: 0
			})
			.then(res => {
				this.newGoodsList = [];
				this.newGoodsList = res.list;
			});
		this.getClassifyList();
		// 是否需要领取补贴金
		this.$service.shopping.userDayAllowance
			.dayAllowanceInfo({
				app: 'yzf'
			})
			.then(res => {
				console.log(res);
				// 开启领取补贴弹窗
				if (res.todayBillonStatus === 0) {
					this.packageVisible = true;
				}
				this.dayAllowanceInfo = res;
			});
		// 刷新到期时间
		setInterval(() => {
			this.now = moment();
		}, 30);
		// 监听是否展示 下拉补贴样式
		document.getElementById('container').addEventListener('scroll', () => {
			let top = document.getElementById('container').scrollTop;
			if (top > 284) {
				this.subsidySlideShow = false;
				this.tabBgColor = '#FD543A';
			} else {
				this.subsidySlideShow = false;
				this.tabBgColor = 'rgba(255,255,255,0)';
			}
		});
	},
	methods: {
		// 新人免单规则
		showTowrule(type) {
			if (type == 1) {
				this.ruleTemplate = this.ruleTemplateOne;
			}
			if (type == 2) {
				this.ruleTemplate = this.ruleTemplateTow;
			}
			this.ruleVisible = true;
		},
		// 领取补贴
		Receive() {
			this.packageVisibleClass = true;
			this.packageVisibleClasst = true;
			setTimeout(() => {
				// 关闭弹出
				this.packageVisible = false;
				this.visible = true;
			}, 1000);
			// return;
			this.$service.shopping.userDayAllowance
				.add({
					app: 'yzf'
				})
				.then(() => {
					// 重新获取补贴金额
					this.getSubsidy();
					// 刷新用户数据
					this.$store.dispatch('GET_USERINFO');
					// 关闭弹出
					// this.packageVisible = false;
					// this.visible = true;
				});
		},
		// 补贴金不足 再逛逛
		subsidyResolve() {
			console.log('继续');
			this.visiblesubsidy = false;
		},
		// 获取补贴金额
		getSubsidy() {
			this.$service.shopping.userDayAllowance.dayAllowanceInfo().then(res => {
				if (typeof res.todayAllowanceSurplus === 'string') {
					this.subsidy = res.todayAllowanceSurplus;
				} else if (typeof res.todayAllowanceSurplus === 'number') {
					this.subsidy = res.todayAllowanceSurplus.toFixed(2);
				}
			});
		},
		// 领取补贴金额
		addSubsidy() {
			this.$service.shopping.userDayAllowance
				.add({
					app: 'yzf'
				})
				.then(res => {
					this.subsidy = res.toFixed(2);
				});
		},
		PrefixInteger(num, n) {
			return (Array(n).join(0) + num).slice(-n);
		},
		// 获取一级分类列表
		getClassifyList() {
			// 获取一级分类
			this.$service.shopping.specialClassify
				.list({
					specialType: 100
				})
				.then(res => {
					res.forEach(item => {
						item.title = item.mainName;
						item.loading = false;
						item.finished = false;
						item.error = false;
						item.goodsList = [];
						item.page = 1;
					});
					this.list = this.list.concat(res);
				});
		},
		// tab切换还原page
		tabChange() {
			document.getElementById('container').scrollTop = 0;
		},
		// 下拉刷新
		onRefresh(item) {
			this.getSubsidy();
			item.error = false;
			item.loading = true;
			item.finished = false;
			item.page = 1;
			this.loadMore(item, 'refresh');
		},
		// 异步加载数据
		loadMore(item, operate) {
			if (Number(item.id) === 0) {
				this.params.floorId = '';
				this.params.order = 'ysqLevel';
				this.params.sort = 'desc';
			} else {
				this.params.floorId = item.floorId;
				this.params.order = '';
				this.params.sort = '';
			}
			this.params.page = item.page;
			this.$service.shopping.goods.dayAllowanceGoodsList(this.params).then(res => {
				// 刷新列表
				if (operate === 'refresh') {
					item.goodsList = [];
					// this.$toast('刷新成功');
					this.isRefresh = false;
				}
				item.goodsList = item.goodsList.concat(res.list);

				// 加载状态结束
				item.loading = false;
				item.page += 1;

				// 暂无数据
				if (item.goodsList.length === 0) {
					item.page = 1;
					item.error = true;
				} else if (item.goodsList.length >= res.pagination.total) {
					// 数据全部加载完成
					item.finished = true;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.backHome {
	font-size: 20px;
	width: 132px;
	height: 66px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.31);
	border-radius: 38px 0px 0px 38px;
	right: 0;
	.icon {
		font-size: 42px;
	}
	.text {
		line-height: 26px;
		margin-left: 5px;
		color: #333333;
		font-weight: 500;
	}
}
.special-zero {
	background-size: 100%;
	width: 100%;
	min-height: 100%;
	max-height: 1446px;
	padding-bottom: 25px;
	position: relative;
	background: linear-gradient(180deg, rgba(253, 84, 58, 1) 10%, rgba(253, 84, 58, 1) 40%, rgba(246, 247, 250, 1) 70%);
	.rules {
		position: absolute;
		top: 192px;
		right: 0;
		color: #fdffff;
		font-size: 22px;
		padding: 4px 10px 4px 20px;
		border-radius: 50px 0 0 50px;
		background: rgba(0, 0, 0, 0.3);
		z-index: 1;
		width: 106px;
		height: 44px;
		line-height: 44px;
		background: rgba(255, 155, 137, 0.46);
		border-radius: 22px 0px 0px 22px;
		text-align: center;
		i {
			margin-left: 4px;
			font-size: 22px;
		}
	}
	.goods-content {
		margin: 0 auto;
		border-radius: 32px;
		background: transparent;
		.van-list {
			min-height: 850px;

			.goods-list {
				padding: 0px 24px;
				width: 100%;
				.goods-wrap {
					border-radius: 16px;
					width: 704px;
					height: 318px;
					margin: 0 auto;
					background: rgba(255, 255, 255, 1);
					margin-top: 20px;
					@include flexBox(center, center);
				}
			}
			.van-skeleton {
				margin-bottom: 30px;
				padding: 30px 24px 30px 24px;
				border-bottom: 2px dotted #f2f3f5;
				.van-skeleton__avatar {
					width: 37% !important;
					height: 0 !important;
					padding-bottom: 37%;
					border-radius: 20px;
				}
				.van-skeleton__content {
					padding-top: 0;
					@include flexBox(space-between, null, column);
				}
			}
		}
	}
	/deep/.van-list__finished-text {
		border-top: 2px solid #e2e2e2;
	}
}

.subsidy-top {
	width: 100%;
	height: 284px;
	font-size: 28px;
	color: #f3423e;
	margin: 0 auto;
	background: url('../../../assets/images/index/special/subsidy-bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

// 补贴金
.subsidy {
	width: 704px;
	height: 181px;
	font-size: 28px;
	padding-left: 150px;
	padding-top: 19px;
	color: #f3423e;
	margin: 0 auto;
	background: url('../../../assets/images/index/special/zero2.0-background.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-bottom: 20px;
	position: relative;
	.price {
		font-size: 32px;
		span {
			font-size: 60px;
			font-weight: 500;
		}
	}
	.use {
		width: 144px;
		height: 50px;
		// line-height: 10px;
		@include flexBox(center, center, column);
		text-align: center;
		position: absolute;
		font-size: 26px;
		font-weight: 400;
		line-height: 36px;
		color: rgba(255, 255, 255, 1);
		background: rgba(243, 66, 62, 1);
		border-radius: 32px;
		top: 76px;
		right: 28px;
	}
}
// 补贴金 滑动

.subsidy-slide-box {
	position: fixed;
	z-index: -1;
	top: 0;
	width: 750px;
	height: 158px;
	// line-height: 158px;
	padding-top: 22px;
	background: rgba(253, 84, 58, 1);
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
}
.subsidy-slide {
	width: 704px;
	height: 110px;
	font-size: 28px;
	padding-left: 194px;
	padding-top: 10px;
	color: #f3423e;
	margin: 0 auto;
	background: url('../../../assets/images/index/special/zero2.0-background2.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	.price {
		font-size: 32px;
		span {
			font-size: 60px;
			font-weight: 500;
		}
	}
}

.one-change {
	width: 680px;
	height: 60px;
	background: rgba(255, 237, 196, 1);
	border-radius: 32px;
	@include flexBox(space-between, center);
	font-size: 28px;
	margin: 0 auto;
	margin-bottom: 20px;
	font-weight: 400;
	padding: 0 15px;
	color: #f70114;
	.left {
		@include flexBox(center, center);
	}
	i {
		font-size: 40px;
		margin-right: 10px;
	}
	.p {
		text-decoration: underline;
		color: #9b0000;
		display: block;
		// background-color: rgba(0, 0, 0, 0.3);
		padding: 0 15px;
		border-radius: 30px;
		font-size: 20px;
	}
}

.copy-popups {
	width: 100%;
	height: 732px;
	border-radius: 16px;
	background: transparent;

	.main {
		width: 100%;
		height: 100%;
		background: url('../../../assets/images/index/special/zero-activity-bg.png');
		background-size: 100% 100%;
		padding-top: 210px;

		.pay-btn {
			width: 482px;
			height: 94px;
			line-height: 94px;
			background: linear-gradient(180deg, rgba(255, 237, 147, 1) 0%, rgba(253, 182, 38, 1) 100%);
			box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
			border-radius: 48px;
			font-size: 36px;
			font-weight: 500;
			text-align: center;
			color: rgba(242, 73, 56, 1);
			margin: 36px auto 0 auto;
		}
		.time-box {
			font-size: 28px;
			color: #fae480;
			@include flexBox(center, center);
			text-align: center;
			margin-top: 16px;
			.time {
				@include flexBox(center, center);
				.time-span {
					display: block;
					width: 25px;
					height: 26px;
					line-height: 26px;
					color: #221d2c;
					border-radius: 4px;
					font-size: 20px;
					margin: 0 2px;
					padding: 0;
				}
				.time-bg {
					color: #ffffff;
					background: rgba(201, 54, 32, 1);
				}
				.division {
					width: 10px;
					height: 24px;
					line-height: 24px;
					display: inline-block;
					font-size: 28px;
				}
			}
		}
		.main-subsidy {
			width: 704px;
			height: 181px;
			font-size: 28px;
			padding-left: 248px;
			color: #f3423e;
			margin: 0 auto;
			margin-bottom: 20px;
			.price {
				font-size: 68px;
				span {
					font-size: 68px;
					font-weight: 500;
				}
			}
		}
		.main-title {
			font-size: 52px;
			color: #fae480;
			text-align: center;
			margin-top: 30px;
			span {
				color: #ffffff;
			}
		}
	}
}

// 领取动画
@keyframes lin-ani {
	10% {
		transform: scale(0.8);
	}
	20% {
		transform: scale(1);
	}
	30% {
		transform: scale(0.8);
	}
	40% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.8);
	}
	60% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes lin-ani-t {
	form {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}
.package-popups {
	width: 100%;
	height: 100vh;
	background: transparent;

	.main {
		width: 650px;
		height: 100%;
		margin: 0 auto;
		color: #fff;
		height: 750px;
		@include flexBox(center, center, column);
		background-size: 100% 100%;
		position: relative;
		transform-style: preserve-3d;
		top: 300px;
		.main-t {
			background: url('../../../assets/images/index/special/backage-t.png');
			background-size: 100% 100%;
			width: 100%;
			height: 512px;
			position: absolute;
			top: 0;
			transition: all 1s;
			.text {
				position: absolute;
				top: 110px;
				text-align: center;
				width: 100%;
				p {
					font-size: 30px;
				}
				h2 {
					font-size: 60px;
					margin-top: 15px;
				}
				.desc {
					font-size: 36px;
					margin-top: 60px;
					margin-bottom: 30px;
				}
			}
		}
		.main-t-a {
			top: -110%;
		}
		.main-b {
			background: url('../../../assets/images/index/special/backage-b.png');
			background-size: 100% 100%;
			width: 100%;
			height: 328px;
			position: absolute;
			bottom: 0;
			transition: all 1s;
		}
		.main-b-a {
			bottom: -100%;
		}
		.main-c {
			background: url('../../../assets/images/index/special/backage-c.png');
			background-size: 100% 100%;
			width: 150px;
			height: 150px;
			position: absolute;
			bottom: 135px;
			transform: perspective(99999);
			animation: lin-ani 3s linear infinite;
		}
		.main-c-a-t {
			animation: lin-ani-t 1s linear infinite;
		}

		img {
			width: 152px;
			height: 152px;
		}
	}
}

.copy-popupss {
	width: 100%;
	height: 342px;
	background: transparent;
	text-align: center;
	.main {
		width: 636px;
		height: 342px;
		background: #f24e36;
		background-size: 100% 100%;
		margin: 0 auto;
		border-radius: 16px;
		padding-top: 62px;
		.btn-box {
			display: flex;
			margin-top: 36px;
			justify-content: space-between;
			padding: 0 64px;
			.pay-btn {
				width: 230px;
				height: 94px;
				line-height: 94px;
				background: linear-gradient(180deg, rgba(255, 237, 147, 1) 0%, rgba(253, 182, 38, 1) 100%);
				box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
				border-radius: 48px;
				font-size: 36px;
				font-weight: 500;
				text-align: center;
				color: rgba(242, 73, 56, 1);
				// margin: 0 auto 0 auto;
			}
			.pay-btn-no {
				width: 230px;
				height: 88px;
				line-height: 84px;
				border: 2px solid rgba(252, 148, 129, 1);
				border-radius: 44px;
				font-size: 36px;
				color: #ffd1a3;
			}
		}

		.main-msg {
			height: 50px;
			font-size: 36px;
			font-weight: 500;
			line-height: 50px;
			color: rgba(250, 228, 128, 1);
		}
		.main-msg-tow {
			height: 40px;
			font-size: 28px;
			font-weight: 400;
			line-height: 40px;
			color: rgba(250, 228, 128, 1);
			margin-top: 10px;
		}
	}
}

.rule-popup {
	width: 600px;
	border-radius: 16px;
	padding: 50px 40px;
	.main {
		h2 {
			font-size: 32px;
			text-align: center;
			margin-bottom: 50px;
			color: #383434;
		}
		.rule {
			height: 600px;
			overflow: auto;
			font-size: 26px;
			color: #616161;
			margin-bottom: 10px;
		}
	}
}
@supports (bottom: env(safe-area-inset-bottom)) {
	.back-home {
		margin-bottom: env(safe-area-inset-bottom);
	}
}
.title-line {
	background: url('../../../assets/images/index/special/title-one.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 326px;
	height: 30px;
	margin: 36px auto;
}

.title-line-t {
	background: url('../../../assets/images/index/special/title-tow.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 326px;
	height: 30px;
	margin: 36px auto;
}

/deep/ .van-tabs {
	.van-tab {
		flex-basis: unset !important;
		padding: 0 30px;

		.van-ellipsis {
			transition: 0.3s;
		}

		.van-tab__text {
			transition: 0.3s;
		}

		&.van-tab--active {
			.van-tab__text {
				color: #fff;
			}
		}
	}
	.van-tabs__line {
		height: 8px;
		width: 40px !important;
		transform: translateX(33px) translateX(-50%);
		background-color: $main-color;
	}

	.van-tab__pane-wrapper--inactive {
		overflow: hidden;
	}
}
.time-boxs {
	@include flexBox(flex-start, flex-start);
	.time {
		@include flexBox(center, center);
		margin-top: 8px;
		margin-right: 10px;
		.time-span {
			display: block;
			width: 25px;
			height: 26px;
			line-height: 26px;
			color: #f3423e;
			// background: #ffffff;
			border-radius: 4px;
			font-size: 20px;
			margin: 0 2px;
			padding: 0;
			text-align: center;
		}
		.time-bg {
			color: #ffffff;
			background: rgba(243, 66, 62, 1);
		}
		.division {
			width: 10px;
			height: 24px;
			line-height: 24px;
			display: inline-block;
			font-size: 28px;
		}
	}
}
</style>
